/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/prop-types */
/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable import/no-named-as-default-member */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable no-alert */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable array-callback-return */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-restricted-syntax */
/* eslint-disable import/order */

import React, { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import fs from 'fs';
import { ipcRenderer } from 'electron';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { CardActionArea } from '@mui/material';
import './index.css';
import { Row, Col } from 'antd';

const col = { xs: 12, sm: 8, md: 6, lg: 4, xl: 4, xxl: 3 };
const cols = { xs: 24, sm: 24, md: 17, lg: 18, xl: 18, xxl: 18 };
const coles = { xs: 12, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 };

const CardItems = ({ image, title, click }) => {
  return (
    <Col {...col}>
      <Card sx={{ marginBottom: 2, maxWidth: 345, bgcolor: '#333333' }}>
        <CardActionArea
          onClick={() => {
            click?.();
          }}
        >
          <CardMedia component="img" height="160" image={image} />
          <CardContent>
            <Typography
              gutterBottom
              variant="span"
              component="div"
              fontSize={14}
              padding={0}
              margin={0}
            >
              {title}
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </Col>
  );
};

const Backdevloper = () => {
  return (
    <div className="container">
      <h2>工具集</h2>
      <span className="ptitle">工作:</span>
      <Row gutter={12}>
        <CardItems
          image={require('@/renderer/assets/a.jpg')}
          title="项目管理云平台"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'http://192.168.40.7/ngymanage/#/login'
            );
          }}
        />

        <CardItems
          image={require('@/renderer/assets/a1.jpg')}
          title="Yapi-接口文档"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'http://192.168.40.3:3000/group/11'
            );
          }}
        />

        <CardItems
          image={require('@/renderer/assets/a2.jpg')}
          title="GitLab-代码托管平台"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'http://47.100.234.193:9527/nangaoindustryconnection/nangao_iot'
            );
          }}
        />
      </Row>
      <span className="ptitle">前端资料:</span>
      <Row gutter={12}>
        <CardItems
          image={require('@/renderer/assets/b3.gif')}
          title="Ant Design 组件库"
          click={() => {
            ipcRenderer.send('open_window', 'https://ant.design/index-cn');
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b0.jpg')}
          title="Material UI 组件库"
          click={() => {
            ipcRenderer.send('open_window', 'https://mui.com/');
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b1.jpg')}
          title="Iconfont-图标库"
          click={() => {
            ipcRenderer.send('open_window', 'https://www.iconfont.cn/');
          }}
        />

        <CardItems
          image={require('@/renderer/assets/b2.jpg')}
          title="Ahooks-钩子函数合集"
          click={() => {
            ipcRenderer.send('open_window', 'https://ahooks.gitee.io/zh-CN');
          }}
        />

        <CardItems
          image={require('@/renderer/assets/b.jpg')}
          title="Ant Design Pro-后台"
          click={() => {
            ipcRenderer.send('open_window', 'https://pro.ant.design/zh-CN');
          }}
        />

        <CardItems
          image={require('@/renderer/assets/b4.jpg')}
          title="Procomponents-扩展组件"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'https://procomponents.ant.design/'
            );
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b5.jpg')}
          title="Umi3.x-乌米3.x"
          click={() => {
            ipcRenderer.send('open_window', 'https://v3.umijs.org/zh-CN/docs');
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b6.jpg')}
          title="Umi4.x-乌米4.x"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'https://umijs.org/docs/tutorials/getting-started'
            );
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b7.jpg')}
          title="Taro-小程序跨平台"
          click={() => {
            ipcRenderer.send('open_window', 'https://taro-docs.jd.com/docs/');
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b8.jpg')}
          title="React Native-APP跨平台"
          click={() => {
            ipcRenderer.send('open_window', 'https://www.reactnative.cn/');
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b9.jpg')}
          title="RNUILib-APP UI库"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'https://reawix.github.io/react-native-ui-lib/'
            );
          }}
        />
        <CardItems
          image={require('@/renderer/assets/b10.jpg')}
          title="RNVICON-APP图标库"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'https://oblador.github.io/react-native-vector-icons/'
            );
          }}
        />

        <CardItems
          image={require('@/renderer/assets/b11.jpg')}
          title="Electron-桌面应用"
          click={() => {
            ipcRenderer.send('open_window', 'https://www.electronjs.org/zh/');
          }}
        />

        <CardItems
          image={require('@/renderer/assets/b12.jpg')}
          title="Electron React-桌面应用"
          click={() => {
            ipcRenderer.send(
              'open_window',
              'https://electron-react-boilerplate.js.org/docs/installation'
            );
          }}
        />
        <CardItems
          image={require('@/renderer/assets/bs.gif')}
          title="前端纯HTML/CSS UI库"
          click={() => {
            ipcRenderer.send('open_window', 'https://uiverse.io/');
          }}
        />
      </Row>
    </div>
  );
};

export default Backdevloper;
